<template>
  <view >
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          style="width: 100%; height: 100vh;box-sizing: border-box;"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
		  :enable-traffic="trafficEnabled"
		  :enable-satellite="satellite" 
		  :rotate="userHeading"
        >
          <cover-view class="white-area" style="">
			  <cover-view class="area-itemline" style="display: flex;">
			  	<cover-view>GSM ....</cover-view><cover-view>GPS ....</cover-view>
			  </cover-view>
			  <cover-view class="area-itemline" style="">
			  	状态：离线
			  </cover-view>
			  <cover-view class="area-itemline" style="">
			  	定位时间：2012-05-12 19：20：10
			  </cover-view>
			  <cover-view class="area-itemline" style="display: flex;">
			    <cover-image src="../../static/logo.png" style="" mode=""></cover-image>
			    <cover-view class="address">
			      广东省深圳市宝安区固戍三围社区2020号广东省深圳市宝安区固戍三围社区2020号广东省深圳市宝安区固戍三围社区2020号
			    </cover-view>
			  </cover-view>

		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 22%; right: 2%; ">
		  		<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
				<cover-view style="">追踪</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 22%; left: 2%; ">
		  		<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  				<cover-view style="">爱车</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 28%; left: 2%; ">
		  		<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  				<cover-view style="">我的</cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="bottom: 35%; right: 2%; 
		  ">
		  <cover-view class="" style="padding: 10rpx 0rpx;border-bottom: 1rpx solid #dedede;">
		  	+
		  </cover-view>
		  <cover-view class="" style="padding: 10rpx 0rpx;">
		  	-
		  </cover-view>
		  </cover-view>
		  <cover-view class="conver-btn" style="top: 2%; right: 2%;">
		  <cover-view class="btn-map" style="border-bottom: 1rpx solid #dedede;" @click="opensatellite">
		  	<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  	<cover-view style="">地图</cover-view>
		  </cover-view>
		  <cover-view class="btn-map" style=""  @click="opentraffic">
		  	<cover-image src="../../static/logo.png" style="" mode=""></cover-image>
		  	<cover-view style="">路况</cover-view>
		  </cover-view>
		  </cover-view>
        </map>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  trafficEnabled:false,
	  satellite:false,
      latitude: 39.908823, // 示例纬度
      longitude: 116.397470, // 示例经度
      markers: [
        // 你可以在这里添加其他标记点
      ],
    };
  },
  methods:{
	  opensatellite(){
		  console.log('000');
		  this.satellite=!this.satellite
	  },
	  opentraffic(){
		  console.log('000');
		  this.trafficEnabled=!this.trafficEnabled
	  }
  }
};
</script>

<style lang="scss" scoped>
	.conver-btn{
		padding: 10rpx 20rpx;
		color: gray;
		box-sizing: border-box;
		background-color: white;
		position: absolute;
		border-radius: 10rpx;
		text-align: center;
		cover-image{
		height: 30rpx;width: 30rpx;margin: 0 auto;
		}
		cover-view{
			font-size: 22rpx;margin-top: 0;
		}
		.btn-map{
			padding-bottom: 10rpx;
			.iconfont{
				font-size: 30rpx;
			}
			cover-image{
			height: 30rpx;width: 30rpx;margin: 0 auto;
			}
			cover-view{
				font-size: 22rpx;margin-top: 0;
			}
		}
		
	}
.white-area {
	bottom: 10rpx; left: 1%; width: 98%; 
	height: 20%;font-size: 26rpx;color: gray;
	padding: 20rpx;box-sizing: border-box;
	border-top-right-radius: 20rpx;
	border-top-left-radius: 20rpx;
    background-color: white;
    position: absolute; /* 必须设置为绝对定位 */
    .area-itemline{
	  margin: 20rpx;
	  cover-image{
		  height: 26rpx; width: 26rpx;margin-right: 20rpx;
	  }
	  .address{
		  max-width: 90%; word-wrap: break-word; white-space: normal;
	  }
  }
}
</style>